import React, { Component, CSSProperties } from "react";
import { Animated } from "react-native";
import Value = Animated.Value;

export default class FadeInView extends Component<
  {
    style: CSSProperties;
  },
  {
    fadeAnim: Value;
  }
> {
  state = {
    fadeAnim: new Animated.Value(0) // 透明度初始值设为 0
  };

  componentDidMount() {
    Animated.timing(
      // 随时间变化而执行的动画类型
      this.state.fadeAnim,
      {
        toValue: 1 // 透明度最终变为 1， 即完全不透明
      }
    ).start();
  }

  render() {
    return (
      <Animated.View // 可动画化的视图组件
        style={{
          ...this.props.style,
          opacity: this.state.fadeAnim // 将透明度指定为动画变量值
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}
